<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    1.引入vue.js-->
    <script src="js/vue.js"></script>
</head>
<body>
<!-- 挂载节点-->
<div id="app">
    用户名<input type="text" v-model="name" /><br/>
    <input type="button"  @click="sayhello" value="点我一下"/>
</div>
</body>
<script type="text/javascript">
    //创建Vue对象
    new Vue({
        el:"#app",//挂载点
        data:{
            name:"张三"

        },//数据
        created(){//创建后
            console.log("创建完成了。。。。。。。。。。。")
        },
        beforeCreate(){//创建之前
          console.log("我创建之前触发。。。。。。。。。。。")
        },
        beforeMount(){//挂载前
            console.log("挂载之前触发。。。。。。。。。。。")
        },
        mounted(){//挂载后  ------钩子函数   一般会在此处加载数据
            console.log("挂载之后触发。。。。。。。。。。。")
           // this.sayhello();
        },
        destroy(){
            console.log("寄了。。。。。。。。。。。")
        },
        methods:{
            sayhello(){
                this.name="王二"
                console.log(this.name)
            }
        },//方法

    })
</script>
</html>